<template>
  <div id="contactUs">
    <img
      src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bannermc7.png"
      class="banner"
    />
    <div class="title1">
      <span>我们将为您提供免费咨询服务</span>
    </div>
    <P class="company"
      >江苏铭创商务发展集团有限公司成立于2018年，以“全业务支撑”和“场景化驱动”为核心，以“互联网+创新”为发展动力，以高附加值商品供应链和全链路数字化为底座,打造全场景、全产链、数智化的企业服务平台。</P
    >
    <!--    <div class="kefubox">-->
    <!--      <img src="@/assets/image/phone1.png"class="kefu" />-->
    <!--    </div>-->
    <div class="content">
      <div class="map" ref="map"></div>
      <div class="address">
        <p>
          江苏铭创商务发展集团有限公司 <br />
          南京总公司：江苏省 南京市 建邺区 沙洲街道创智路1号北纬国际中心<br />
          <!--          电话：025-85500001<br/>-->
          <!--          传真：+86-025-85500001 <br/>-->
          <!-- 邮件：mingchuangbusiness@163.com <br /> -->
          网址：www.njmcsw.com <br />
        </p>
      </div>
    </div>
    <div class="footer-top">
      <div class="licence-code">
        <ul class="nav">
          <li>首页</li>
          <li>产品与服务</li>
          <li>解决方案</li>
          <li>开放平台</li>
          <li>新闻中心</li>
          <li>关于我们</li>
          <li class="active">联系我们</li>
        </ul>
        <!--        <div>-->
        <!--          <h5 class="about-h55">服务热线</h5>-->
        <!--          <h5>025-85500001</h5>-->
        <!--        </div>-->
        <!-- <div>
          <h5 class="about-h55">企业地址</h5>
          <p class="adress">
            南京总公司：南京市秦淮区光华路海福巷90-1号 南报文创园
          </p>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "contactUs",

  mounted() {
    this.createMap();
  },
  methods: {
    createMap() {
      //创建Map实例
      var map = new BMap.Map(this.$refs.map);
      // 初始化地图,设置中心点坐标

      var point = new BMap.Point(118.730517, 32.03804); // 创建点坐标
      map.centerAndZoom(point, 15);
      //添加鼠标滚动缩放
      map.enableScrollWheelZoom();

      //添加缩略图控件
      map.addControl(
        new BMap.OverviewMapControl({
          isOpen: false,
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        })
      );
      //添加缩放平移控件
      map.addControl(new BMap.NavigationControl());
      //添加比例尺控件
      map.addControl(new BMap.ScaleControl());
      //添加地图类型控件
      //map.addControl(new BMap.MapTypeControl());

      //设置标注的图标
      var icon = new BMap.Icon(
        require("../assets/image/locationIcon.png"),
        new BMap.Size(35, 35)
      );
      //设置标注的经纬度
      var marker = new BMap.Marker(new BMap.Point(118.743782, 31.989874), {
        icon: icon,
      });
      //把标注添加到地图上
      map.addOverlay(marker);
      /*var content = "<table>";
          content = content + "<tr><td> 地点：南京市创智路1号北纬国际A座12C </td></tr>";
          content += "</table>";
          var infowindow = new BMap.InfoWindow(content);
          marker.addEventListener("click", function () {
            this.openInfoWindow(infowindow);

          });

          marker.openInfoWindow(infowindow);*/

      //点击地图，获取经纬度坐标
      map.addEventListener("click", function (e) {
        document.getElementById("aa").innerHTML =
          "经度坐标：" + e.point.lng + " &nbsp;纬度坐标：" + e.point.lat;
      });
    },
  },
};
</script>

<style scoped lang="scss">
#contactUs {
  .banner {
    width: 100%;
  }
  .title1 {
    width: 117rem;
    height: 12.3rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      font-size: 2.4rem;
      font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
      font-weight: 700;
      color: #000000;
      line-height: 3.1rem;
    }
  }
  .company {
    width: 77.9rem;
    height: 5rem;
    margin: auto;
    font-size: 1.5rem;
    text-align: center;
    color: #878787;
    line-height: 2.5rem;
    word-wrap: break-word;
  }
  .kefubox {
    width: 100%;
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 6rem;
    .kefu {
      width: 31.8rem;
      height: 9.4rem;
    }
  }
  .content {
    width: 117rem;
    margin: auto;
    display: flex;
    align-items: center;
    margin-bottom: 21.8rem;
    margin-top: 10rem;

    .map {
      width: 57.8rem;
      height: 23.5rem;
      margin-right: 11.7rem;
    }
    .address p {
      font-size: 1.5rem;
      text-align: left;
      color: #000000;
      line-height: 2.5rem;
    }
  }
  .footer-top {
    width: 100%;
    height: 16rem;
    position: relative;
    bottom: 0;
    background: linear-gradient(180deg, #e63f04, #ac0d0d);
    color: #fff;
    .licence-code {
      width: 120rem;
      height: 16rem;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .nav {
        display: flex;
        li {
          font-size: 1.6rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          line-height: 2rem;
          margin-right: 4.1rem;
        }
        .active {
          font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
          font-weight: 700;
        }
      }

      .about-h55 {
        margin: 0rem 0 1.8rem;
      }

      .licence-h5,
      .QR-code-h5 {
        padding-bottom: 1.6rem;
        border-bottom: 1px solid #fff;
        margin: 2rem 0 1.1rem;
      }

      h5 {
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
      }

      p {
        margin-bottom: 0.7rem;
        font-size: 1.4rem;
        line-height: 1.9rem;
      }
    }
  }
}
</style>
